<template>
  <div v-loading="pageLoading">
    <el-button class="fr" type="primary" plain @click="createItem" v-permission="'orderInfo.add'"
      :loading="exportLoading">新增明细
    </el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入物料查询按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="getOrderDetail" @clear="getOrderDetail" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="getOrderDetail">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="{row,key}">
        <span v-if="key =='request_date' && row[key]">
          {{ row[key].slice(0,10) }}
        </span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog name="单据明细" :data="dataDetail" :formProps="formProps" :fields="fieldsDetail" @submit="submit"
      :visible.sync="editFormVisible">
      <template v-slot:footer>
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click.native="submitDetail(false)">确定</el-button>
        <el-button type="warning" :loading="submitLoading" @click.native="submitDetail(true)">确定并继续添加
        </el-button>
      </template>
    </z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import dayjs from 'dayjs'

export default {
  mixins: [commonMixin],
  name: 'tab2',
  props: {
    orderId: {
      type: String,
      default: '',
    },
    openDialog: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    orderId: {
      handler(n, o) {
        this.getOrderDetail()
      },
      immediate: true,
      deep: true,
    },
    openDialog: {
      handler(n, o) {
        if (n) {
          this.createItem()
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      tableProps: {
        // hideOperations: true,
      },
      initDataDetail: {
        item_order: 10,
        request_date: dayjs().format('YYYY-MM-DD'),
      },
      dataDetail: {},
      api: this.$api.order,
      query: {
        queryString: null,
      },
      columns: [
        { title: '物料号', key: 'key_part_no', width: 150 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '需求日期', key: 'request_date', width: 140 },
        { title: '需求数量', key: 'request_qty', width: 200 },
        { title: '完成数量', key: 'actual_qty', width: 100 },
        { title: '项次', key: 'item_order', width: 100 },
        { title: '备注', key: 'remarks' },
      ],
      fieldsDetail: [
        {
          title: '物料',
          key: 'material_id',
          name: 'select',
          options: [],
          props: {
            filterable: true,
            remote: true,
            remoteMethod: this.getSkuOptions,
          },
          span: 12,
          required: true,
        },
        {
          title: '项次',
          name: 'number',
          props: {
            step: 10,
          },
          key: 'item_order',
          span: 12,
        },
        {
          title: '需求数量',
          key: 'request_qty',
          required: true,
          name: 'number',
          props: {
            step: 100,
            min: 1,
          },
          span: 12,
        },
        { title: '需求日期', key: 'request_date', required: true, name: 'date', span: 12 },
        { title: '备注', key: 'remarks', name: 'textarea', props: { rows: 3 }, span: 24 },
      ],
    }
  },

  methods: {
    getOrderDetail() {
      this.$request(this.api + 'getdetailsbyid', { order: this.orderId, others: this.query.queryString }).then((r) => {
        this.list = r.list
        this.total = r.total
      })
    },
    createItem() {
      this.initDataDetail.item_order = 10
      this.dataDetail = _.cloneDeep(this.initDataDetail)
      this.editFormVisible = true
    },
    getSkuOptions(query) {
      let tmp = this.fieldsDetail.find((x) => x.key == 'material_id')
      tmp.options = []
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            tmp.options = r.map((i) => {
              return {
                value: i.id,
                label: i.key_part_no + '  ' + i.key_part_name,
              }
            })
          })
          .catch(() => {})
      }
    },
    editItem(v) {
      this.$request(this.api + 'getdetailbyid?id=' + v.id).then((r) => {
        this.getSkuOptions(v.key_part_name)
        this.dataDetail = r
        this.editFormVisible = true
      })
    },
    deleteItem(v) {
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        let url = this.api + 'delete'
        this.$request(url + '/detail/' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getOrderDetail()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
    submitDetail(flag) {
      this.submitLoading = true
      let dataDetail = this.formatBeforeSave(this.dataDetail)
      let check = this.validataData(this.fieldsDetail, dataDetail)
      if (!check) {
        this.submitLoading = false
        return
      }
      dataDetail['order_main_id'] = this.orderId
      this.$request(this.api + 'adddetail', dataDetail, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.$request(this.api + 'getdetailsbyid?order=' + this.orderId).then((r) => {
            this.list = r.list
            this.total = r.total
            this.editFormVisible = flag
            if (flag) {
              this.initDataDetail.item_order = dataDetail.item_order + 10
              this.dataDetail = _.cloneDeep(this.initDataDetail)
            }
          })
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>

<style>
</style> 